<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>商户管理</title>
    <!-- 引入easyui框架 -->
    <link rel="stylesheet" type="text/css"
          href="../js/jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="../js/jquery-easyui-1.7.0/themes/icon.css">
    <link rel="stylesheet" type="text/css"
          href="../js/jquery-easyui-1.7.0/themes/color.css">
    <script type="text/javascript"
            src="../js/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script type="text/javascript"
            src="../js/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
</head>
<body>

<!-- 设计一个数据表格用于列表显示管理员信息 -->
<!-- 数据表格list  start  -->
<table id="food_dg" title="食品信息" class="easyui-datagrid"
       style="width: 100%; height: 600px" url="../sys/food/search"
       toolbar="#food_toolbar" pagination="true" rownumbers="true"
       fitColumns="true" fit="true" singleSelect="true">
    <thead>
    <tr>
        <th field="foodId" width="50">食品编号</th>
        <th field="foodName" width="50">食品名称</th>
        <th field="foodExplain" width="50">食品简介</th>
        <th field="foodPrice" width="50">食品价格</th>
        <th field="businessId" width="50">所属商家的Id</th>
        <th field="business" formatter="showBusiness"  width="50">商家名称</th>

    </tr>
    </thead>
</table>
<div id="food_toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton"
       iconCls="icon-add" plain="true" onclick="newfood()">新增</a> <a
        href="javascript:void(0)" class="easyui-linkbutton"
        iconCls="icon-edit" plain="true" onclick="editfood()">修改</a> <a
        href="javascript:void(0)" class="easyui-linkbutton"
        iconCls="icon-remove" plain="true" onclick="destroyfood()">删除</a>
</div>
<!-- 数据表格list  start  -->

<!-- 数据新增对话框  start -->
<div id="food_dlg" class="easyui-dialog"
     style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
     buttons="#food_dlg-buttons">
    <div class="ftitle">食品</div>
    <form id="food_fm" enctype="multipart/form-data" method="post">
        <div class="fitem">
            <label>食品名称:</label>
            <input name="foodName" class="easyui-validatebox" required="true">
        </div>

        <div class="fitem">
            <label>食品简介:</label>
            <input name="foodExplain"class="easyui-validatebox" required="true">
        </div>

        <div class="fitem">
            <label>食品价格:</label>
            <input name="foodPrice" class="easyui-validatebox" required="true">
        </div>

        <div class="fitem">
            <label>所属商家Id:</label>
            <input name="businessId" class="easyui-validatebox" required="true">
        </div>

    </form>
</div>
<div id="food_dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok"
       onclick="savefood()">保存</a> <a href="#" class="easyui-linkbutton"
                                          iconCls="icon-cancel"
                                          onclick="javascript:$('#food_dlg').dialog('close')">取消</a>
</div>

<!-- 数据新增对话框  end -->
<script type="text/javascript">
    function newfood() {
        //弹出新增对话框
        $('#food_dlg').dialog('open').dialog('setTitle', '新增食品');
        //清空历史表单记录
        $('#food_fm').form('clear');
        //配置新增管理员的地址
        url = '../sys/food/add';
    }

    function editfood() {
        //从数据表格中获取选定的要修改的一行数据
        var row = $('#food_dg').datagrid('getSelected');

        if (row) {
            $('#food_dlg').dialog('open').dialog('setTitle', '修改食品信息');
            //把选择的数据填充会数据修改表单
            $('#food_fm').form('load', row);
            //api
            url = '../sys/food/edit?foodId=' + row.foodId;
        } else {
            $.messager.show({
                title : '警告',
                msg : '请选择一行数据'
            });
        }
    }

    function savefood() {
        $('#food_fm').form('submit', {
            url : url,
            onSubmit : function() {
                return $(this).form('validate');
            },
            success : function(result) {
                var result = eval('(' + result + ')');
                if (result.msg) {
                    $.messager.show({
                        title : 'Error',
                        msg : result.msg
                    });
                } else {
                    $.messager.show({
                        title : '提示',
                        msg : "操作成功"
                    });
                    $('#food_dlg').dialog('close'); //关闭弹窗
                    $('#food_dg').datagrid('reload'); //重新加载列表数据
                }
            }
        });
    }

    function destroyfood() {
        var row = $('#food_dg').datagrid('getSelected');
        if (row) {
            $.messager.confirm('Confirm', '请确认删除食品?', function(r) {
                if (r) {
                    $.post('../sys/food/del', {
                        foodId : row.foodId
                    }, function(result) {

                        if (result.success) {
                            $('#food_dg').datagrid('reload'); //重新加载列表数据
                        }

                        $.messager.show({ //显示错误信息
                            title : '错误',
                            msg : result.msg
                        });

                    }, 'json');
                }
            });
        }else{
            $.messager.show({ //显示错误信息
                title : '警告',
                msg : "请选择要删除的数据！"
            });
        }
    }

    function showBusiness(value, row, index){
        //console.log(value);
        if(value){
            var ret = "";
            ret += "<font color='#00bfff'>"+value.businessName+"</font>&nbsp;&nbsp;"
            return ret;
        }else{
            return "<font color='red'>错误</font>";
        }
    }


</script>

</body>
</html>